﻿<!DOCTYPE html>
<html>
    <head>
        <title>Options</title>
        <script src="/js/optionsFlyout.js"></script>
    </head>
    <body>
        <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Options" data-win-options="{settingsCommandId:'options',width:'narrow',onbeforeshow:beforeShowHandler,onafterhide:afterHideHandler}">
            <div class="win-ui-light win-header" style="background-color:#FFEA6F">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Options</div>
                <img src="/images/smallLogo.png" style="position: absolute; right: 40px;"/>
            </div>
            <div class="win-content">
                <div class="win-settings-section">
                    <h3>Start removing after</h3>
                    <input type="text" id="maximumShapes" style="width:50px" /> shapes

                    <h3>Sounds</h3>
                    <select id="sounds">
                        <option value="None">None</option>
                        <option value="Speech">Speech</option>
                        <option value="Laughter">Laughter</option>
                    </select>

                    <h3>Cursor</h3>
                    <select id="cursor">
                        <option value="Hand">Hand</option>
                        <option value="Arrow">Arrow</option>
                    </select>

                    <h3>Font</h3>
                    <select id="characterFont">
                        <option value="Arial">Arial</option>
                        <option value="Comic Sans MS">Comic Sans</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Times New Roman">Times New Roman</option>
                        <option value="Verdana">Verdana</option>
                    </select>

                    <div id="forceUppercase" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Force letters to be uppercase'}">
                    </div>
                    <div id="facesOnShapes" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Faces on shapes'}">
                    </div>
                    <div id="clicklessDraw" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Clickless mouse drawing'}">
                    </div>
                    <div id="fadeShapes" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Fade shapes away'}">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>